<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>英雄列表</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/common.css"/>
    <link rel="stylesheet" href="css/hero.css"/>
    <link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="//cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
    <link rel="stylesheet" href="css/common.css"/>
    <link rel="stylesheet" href="css/main.css"/>

</head>
<body>
<nav class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation" id="nav">
    <div class="container">
        <div class="navbar-header">
            <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">菜单切换</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="" class="navbar-brand"><img src="img/lolmax.png" alt=""/></a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li class=""><a href="index.html">首页</a></li>
                <li class="active"><a href="hero.html">英雄</a></li>
                <li><a href="items.html">物品</a></li>
                <li><a href="player.html">玩家</a></li>
            </ul>
        </div>
    </div>
</nav>
<div class="back-img-bar">
    <div class="background">
        <div class="search">
            <h3>英雄出场</h3>
            <input type="text" placeholder="搜索召唤师、昵称们、物品..."/>
            <a href="#"><i class="icon-search"></i></a>
        </div>
    </div>
</div>
<nav class="navbar navbar-default" role="navigation" id="nav-menu">
    <div class="container">
        <div class="navbar-header">
            <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">菜单切换</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="">胜率</a></li>
                <li class=""><a href="">出场</a></li>
                <li><a href="">KDA</a></li>
                <li><a href="">金钱/经验</a></li>
                <li><a href="">伤害</a></li>
                <li><a href="">基础属性</a></li>
            </ul>
        </div>
    </div>
</nav>
<div class="main">
    <div class="time nav">
        <ul class="list-inline">
            <span>时间</span>
            <li class="active"><a href="">本月</a></li>
            <li><a href="">S5赛季</a></li>
        </ul>
    </div>
    <div class="rank nav">
        <ul class="list-inline">
            <span>段位</span>
            <li class="active"><a href="">全部</a></li>
            <li><a href="">青铜</a></li>
            <li><a href="">白银</a></li>
            <li><a href="">黄金</a></li>
            <li><a href="">铂金</a></li>
            <li><a href="">钻石</a></li>
            <li><a href="">超凡大师</a></li>
            <li><a href="">最强王者</a></li>
        </ul>
    </div>
    <div class="match nav">
        <ul class="list-inline">
            <span>比赛</span>
            <li class="active"><a href="">全部</a></li>
            <li><a href="">匹配赛</a></li>
            <li><a href="">排位赛</a></li>
            <li><a href="">战队赛</a></li>
            <li><a href="">统治战场</a></li>
        </ul>
    </div>

    <div class="container list">
        <table class="table-info table-striped table-hover">
            <thead>
            <tr>
                <th>英雄</th>
                <th>胜率</th>
                <th>比赛场次</th>
            </tr>
            </thead>
            <tr class="item">
                <td style="width: 20%;">
                    <img src="http://ossweb-img.qq.com/images/lol/img/champion/Teemo.png"
                                             alt=""/><span>迅捷斥候</span></td>
                <td>
                    <div>90%</div>
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" aria-valuenow="60"
                             aria-valuemin="0" aria-valuemax="100" style="width: 90%;">
                            <span class="sr-only">40% 完成</span>
                        </div>
                    </div>
                </td>
                <td>
                    <div>422314</div>
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" aria-valuenow="60"
                             aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
                            <span class="sr-only">40% 完成</span>
                        </div>
                    </div>

                </td>
            </tr>

            <tr class="item">
                <td style="width: 20%;"><img src="http://ossweb-img.qq.com/images/lol/img/champion/Teemo.png"
                                             alt=""/><span>迅捷斥候</span></td>
                <td>
                    <div>90%</div>
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" aria-valuenow="60"
                             aria-valuemin="0" aria-valuemax="100" style="width: 90%;">
                            <span class="sr-only">40% 完成</span>
                        </div>
                    </div>
                </td>
                <td>
                    <div>422314</div>
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" aria-valuenow="60"
                             aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
                            <span class="sr-only">40% 完成</span>
                        </div>
                    </div>

                </td>
            </tr>

            <tr class="item">
                <td style="width: 20%;"><img src="http://ossweb-img.qq.com/images/lol/img/champion/Teemo.png"
                                             alt=""/><span>迅捷斥候</span></td>
                <td>
                    <div>90%</div>
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" aria-valuenow="60"
                             aria-valuemin="0" aria-valuemax="100" style="width: 90%;">
                            <span class="sr-only">40% 完成</span>
                        </div>
                    </div>
                </td>
                <td>
                    <div>422314</div>
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" aria-valuenow="60"
                             aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
                            <span class="sr-only">40% 完成</span>
                        </div>
                    </div>

                </td>
            </tr>

            <tr class="item">
                <td style="width: 20%;"><img src="http://ossweb-img.qq.com/images/lol/img/champion/Teemo.png"
                                             alt=""/><span>迅捷斥候</span></td>
                <td>
                    <div>90%</div>
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" aria-valuenow="60"
                             aria-valuemin="0" aria-valuemax="100" style="width: 90%;">
                            <span class="sr-only">40% 完成</span>
                        </div>
                    </div>
                </td>
                <td>
                    <div>422314</div>
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" aria-valuenow="60"
                             aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
                            <span class="sr-only">40% 完成</span>
                        </div>
                    </div>

                </td>
            </tr>

            <tr class="item">
                <td style="width: 20%;"><img src="http://ossweb-img.qq.com/images/lol/img/champion/Teemo.png"
                                             alt=""/><span>迅捷斥候</span></td>
                <td>
                    <div>90%</div>
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" aria-valuenow="60"
                             aria-valuemin="0" aria-valuemax="100" style="width: 90%;">
                            <span class="sr-only">40% 完成</span>
                        </div>
                    </div>
                </td>
                <td>
                    <div>422314</div>
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" aria-valuenow="60"
                             aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
                            <span class="sr-only">40% 完成</span>
                        </div>
                    </div>

                </td>
            </tr>

            <tr class="item">
                <td style="width: 20%;"><img src="http://ossweb-img.qq.com/images/lol/img/champion/Teemo.png"
                                             alt=""/><span>迅捷斥候</span></td>
                <td>
                    <div>90%</div>
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" aria-valuenow="60"
                             aria-valuemin="0" aria-valuemax="100" style="width: 90%;">
                            <span class="sr-only">40% 完成</span>
                        </div>
                    </div>
                </td>
                <td>
                    <div>422314</div>
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" aria-valuenow="60"
                             aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
                            <span class="sr-only">40% 完成</span>
                        </div>
                    </div>

                </td>
            </tr>

            <tr class="item">
                <td style="width: 20%;"><img src="http://ossweb-img.qq.com/images/lol/img/champion/Teemo.png"
                                             alt=""/><span>迅捷斥候</span></td>
                <td>
                    <div>90%</div>
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" aria-valuenow="60"
                             aria-valuemin="0" aria-valuemax="100" style="width: 90%;">
                            <span class="sr-only">40% 完成</span>
                        </div>
                    </div>
                </td>
                <td>
                    <div>422314</div>
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" aria-valuenow="60"
                             aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
                            <span class="sr-only">40% 完成</span>
                        </div>
                    </div>

                </td>
            </tr>

            <tr class="item">
                <td style="width: 20%;"><img src="http://ossweb-img.qq.com/images/lol/img/champion/Teemo.png"
                                             alt=""/><span>迅捷斥候</span></td>
                <td>
                    <div>90%</div>
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" aria-valuenow="60"
                             aria-valuemin="0" aria-valuemax="100" style="width: 90%;">
                            <span class="sr-only">40% 完成</span>
                        </div>
                    </div>
                </td>
                <td>
                    <div>422314</div>
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" aria-valuenow="60"
                             aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
                            <span class="sr-only">40% 完成</span>
                        </div>
                    </div>

                </td>
            </tr>

            <tr class="item">
                <td style="width: 20%;"><img src="http://ossweb-img.qq.com/images/lol/img/champion/Teemo.png"
                                             alt=""/><span>迅捷斥候</span></td>
                <td>
                    <div>90%</div>
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" aria-valuenow="60"
                             aria-valuemin="0" aria-valuemax="100" style="width: 90%;">
                            <span class="sr-only">40% 完成</span>
                        </div>
                    </div>
                </td>
                <td>
                    <div>422314</div>
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" aria-valuenow="60"
                             aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
                            <span class="sr-only">40% 完成</span>
                        </div>
                    </div>

                </td>
            </tr>

            <tr class="item">
                <td style="width: 20%;"><img src="http://ossweb-img.qq.com/images/lol/img/champion/Teemo.png"
                                             alt=""/><span>迅捷斥候</span></td>
                <td>
                    <div>90%</div>
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" aria-valuenow="60"
                             aria-valuemin="0" aria-valuemax="100" style="width: 90%;">
                            <span class="sr-only">40% 完成</span>
                        </div>
                    </div>
                </td>
                <td>
                    <div>422314</div>
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" aria-valuenow="60"
                             aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
                            <span class="sr-only">40% 完成</span>
                        </div>
                    </div>

                </td>
            </tr>

            <tr class="item">
                <td style="width: 20%;"><img src="http://ossweb-img.qq.com/images/lol/img/champion/Teemo.png"
                                             alt=""/><span>迅捷斥候</span></td>
                <td>
                    <div>90%</div>
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" aria-valuenow="60"
                             aria-valuemin="0" aria-valuemax="100" style="width: 90%;">
                            <span class="sr-only">40% 完成</span>
                        </div>
                    </div>
                </td>
                <td>
                    <div>422314</div>
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" aria-valuenow="60"
                             aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
                            <span class="sr-only">40% 完成</span>
                        </div>
                    </div>

                </td>
            </tr>

            <tr class="item">
                <td style="width: 20%;"><img src="http://ossweb-img.qq.com/images/lol/img/champion/Teemo.png"
                                             alt=""/><span>迅捷斥候</span></td>
                <td>
                    <div>90%</div>
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" aria-valuenow="60"
                             aria-valuemin="0" aria-valuemax="100" style="width: 90%;">
                            <span class="sr-only">40% 完成</span>
                        </div>
                    </div>
                </td>
                <td>
                    <div>422314</div>
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" aria-valuenow="60"
                             aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
                            <span class="sr-only">40% 完成</span>
                        </div>
                    </div>

                </td>
            </tr>

            <tr class="item">
                <td style="width: 20%;"><img src="http://ossweb-img.qq.com/images/lol/img/champion/Teemo.png"
                                             alt=""/><span>迅捷斥候</span></td>
                <td>
                    <div>90%</div>
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" aria-valuenow="60"
                             aria-valuemin="0" aria-valuemax="100" style="width: 90%;">
                            <span class="sr-only">40% 完成</span>
                        </div>
                    </div>
                </td>
                <td>
                    <div>422314</div>
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" aria-valuenow="60"
                             aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
                            <span class="sr-only">40% 完成</span>
                        </div>
                    </div>

                </td>
            </tr>
        </table>
    </div>

</div>
<footer>
    <div class="first">
        <a href="#nav" style="margin-left:47.4%;">
            <i class="icon-chevron-up container"></i>
        </a>
    </div>
    <div class="second">
        <ul class="list-inline">
            <li><a href=""><img src="img/max_logo3.png" alt=""/></a></li>
            <li><a href=""><img src="img/lolmax.png" alt=""/></a></li>
            <li><a href=""><img src="img/hosmax.png" alt=""/></a></li>
        </ul>

    </div>
    <div class="third">
        <ul class="navbar-nav left">
            <li><a href="">© 2015 lolmax.com</a></li>
            <li><a href="">反馈群: 469379836</a></li>
            <li><a href=""><i class="icon-apple"></i></a></li>
            <li><a href=""><i class="icon-android"></i></a></li>
            <li><a href=""><i class="icon-desktop"></i></a></li>
        </ul>
        <ul class="navbar-nav middle" id="middle">
            <li><img src="img/logo_01.png" alt=""/></li>
        </ul>
        <ul class="navbar-nav right">
            <li><a href=""><i class="icon-weibo"></i></a></li>
            <li><a href=""><i class="icon-twitter-sign"></i></a></li>
            <li><a href=""><i class="icon-envelope"></i></a></li>
            <li><a href="">加入我们</a></li>
            <li><a href="">录入数据</a></li>
        </ul>
    </div>
</footer>
<script>
    function show() {
        $("#middle").addClass("show", 2000);
    }
    function hide() {
        $("#middle").removeClass("show", 2000);
    }
    setInterval(show(), 1000);
    setTimeout(hide(), 1000);
</script>
<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<span style="position:fixed;bottom:0;" id="busuanzi_container_site_pv">本站总访问量<span id="busuanzi_value_site_pv"></span>次</span>

</body>
</html>
